import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Button, Modal } from 'antd';
import Videos from '../../components/CorporatePage/videobox';
import Instantly from '../../components/CorporatePage/Instantly'
import ShowPage from '../../components/CorporatePage/Show'
import OneStop from '../../components/CorporatePage/One-Stop'
import TabS from '../../components/CorporatePage/TabSwitch'
import Lun from '../../components/CorporatePage/Carousel'
import BigImage from '../../components/CorporatePage/BigImage'
import MerryGoRound from '../../components/CorporatePage/Merry-go-round'
import Bottom from '../../components/CorporatePage/Bottom'
import './index.css';

const Index: React.FC = () => {

    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const [isSubMenuVisible, setIsSubMenuVisible] = useState(false);
    const [isSubMenuVisibles, setIsSubMenuVisibles] = useState(false);

    const handleMouseEnter = (setIsSubMenuVisibleFunc: any) => {
        setIsSubMenuVisibleFunc(true);
    };

    const handleMouseLeave = (setIsSubMenuVisibleFunc: any) => {
        setIsSubMenuVisibleFunc(false);
    };

    return (
        <div className='f-box'>
            <div className="f-top">
                <img src="https://cdn.dancf.com/fe-assets/20231102/logo/logo-text-white.svg" alt="" />
                <ul>
                    <li
                        onMouseEnter={() => handleMouseEnter(setIsSubMenuVisible)}
                        onMouseLeave={() => handleMouseLeave(setIsSubMenuVisible)}
                    >
                        产品<DownOutlined />
                        <div className={`submenu ${isSubMenuVisible ? 'show' : ''}`}>
                            <div className='bs-bs'>
                                <dl className='v-sub'>
                                    <dt>
                                        <img src="" alt="" />
                                    </dt>
                                    <dd>
                                        <h3>创意供给</h3>
                                        <span>1.3亿+版权素材，个性化定制满足多样需求</span>
                                        <p>花瓣设计大赛<img className='hot' src="" alt="" /></p>
                                        <p>定期设计</p>
                                        <p>花瓣版权素材<img className='hot' src="" alt="" /></p>
                                        <p> 咔神商品图智能拍摄 </p>
                                    </dd>
                                </dl>
                                <dl className='v-sub'>
                                    <dt>
                                        <img src="" alt="" />
                                    </dt>
                                    <dd>
                                        <h3>内容生产</h3>
                                        <span>零门槛智能设计工具，人人皆可设计</span>
                                        <p> 30w+版权模板 </p>
                                        <p> 智能编辑器 <img className='hot' src="" alt="" /></p>
                                        <p> 智能设计工具 <img className='hot' src="" alt="" /></p>
                                        <p>  专业级在线设计工具  </p>
                                    </dd>
                                </dl>
                                <dl className='v-sub'>
                                    <dt>
                                        <img src="" alt="" />
                                    </dt>
                                    <dd>
                                        <h3>资产管理</h3>
                                        <span>数字资产管理，品牌合规管控</span>
                                        <p> 资产云端管理 </p>
                                        <p> 团队协作提效 <img className='hot' src="" alt="" /></p>
                                        <p> 品牌合规管控 <img className='hot' src="" alt="" /></p>
                                        <p>  角色权限管理  </p>
                                    </dd>
                                </dl>
                                <dl className='v-sub'>
                                    <dt>
                                        <img src="" alt="" />
                                    </dt>
                                    <dd>
                                        <h3>营销应用</h3>
                                        <span>内容极速应用，赋能全域增长</span>
                                        <p> 电商平台投放 </p>
                                        <p> 新媒体平台投放 <img className='hot' src="" alt="" /></p>
                                        <p> 智慧屏幕营销 </p>
                                    </dd>
                                </dl>
                                <dl className='v-sub'>
                                    <dt>
                                        <img src="" alt="" />
                                    </dt>
                                    <dd>
                                        <h3>效果监测</h3>
                                        <span>数据驱动优化，提升营销效果</span>
                                        <p> 可视化数据 </p>
                                        <p> 全链路监测 <img className='hot' src="" alt="" /></p>
                                        <p> H5营销效果监测 <img className='hot' src="" alt="" /></p>
                                    </dd>
                                </dl>
                                <dl className='v-sub'>
                                    <dt>
                                        <img src="" alt="" />
                                    </dt>
                                    <dd>
                                        <h3>系统定制</h3>
                                        <span>私有化部署，打造专属数字化内容中台</span>
                                        <p> 企业系统集成 </p>
                                        <p> 功能定制开发 <img className='hot' src="" alt="" /></p>
                                        <p> 数据本地部署 </p>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li
                        onMouseEnter={() => handleMouseEnter(setIsSubMenuVisibles)}
                        onMouseLeave={() => handleMouseLeave(setIsSubMenuVisibles)}
                    >
                        解决方案<DownOutlined />
                        <div className={`submenu ${isSubMenuVisibles ? 'show' : ''}`}>
                            <div className='qe-qe'>
                                <div className="submenuleft">
                                    <div className="left-top">
                                        <h3>行业方案</h3>
                                        <div className="lefttopmain">
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                    <div className="left-top">
                                        <h3>行业方案</h3>
                                        <div className="lefttopmain">
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                            <dl>
                                                <dt>
                                                    <img src="" alt="" />
                                                </dt>
                                                <dd>
                                                    <h6>金融行业</h6>
                                                    <span> 提升内容生产力，加强品牌建设 </span>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                                <div className="submenuright">
                                    <img src="https://cdn.dancf.com/fe-assets/20240330/c8faaa7581f6e097747b74d68cb812af.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>开放平台</li>
                    <li>渠道合作</li>
                    <li>了解搞定</li>
                </ul>
                <>
                    <Button type="primary" onClick={showModal}>
                        立即体验
                    </Button>
                    <Modal footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                        <Instantly></Instantly>
                    </Modal>
                </>
            </div>
            <div className='f-div1'>
                <Videos></Videos>
            </div>
            <div className='f-div2'>
                <ShowPage></ShowPage>
            </div>
            <div className='f-div3'>
                <OneStop></OneStop>
            </div>
            <div className='f-div4'>
                <TabS></TabS>
            </div>
            <div className='f-div5'>
                <Lun></Lun>
            </div>
            <div className='f-div6'>
                <BigImage></BigImage>
            </div>
            <div className='f-div7'>
                <MerryGoRound></MerryGoRound>
            </div>
            <div className='f-div8'>
                <p className='huany'>欢迎联系<span>稿定顾问，</span>我们将根据您的需求量身定制个性化方案</p>
                <>
                    <Button type="primary" onClick={showModal}>
                        咨询顾问
                    </Button>
                    <Modal footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                        <Instantly></Instantly>
                    </Modal>
                </>
            </div>
            <div className='f-div9'>
                <Bottom></Bottom>
            </div>
        </div>
    );
};

export default Index;